<template>
  <div class="commodityList" ref="commodityList">
    <van-nav-bar
      title="手机配件"
      left-arrow
      @click-left="$router.go(-1)"
      @click-right="$router.push('/search')"
    >
      <template #right>
        <i class="iconfont icon-sousuo"></i>
      </template>
    </van-nav-bar>
    <van-tabs v-model="active" @change="$refs.commodityList.scrollTop = 0">
      <van-tab v-for="item in topTab" :key="item.category_id">
        <template #title>
          <img :src="item.img_url" alt="" />
          <span>{{ item.name }}</span>
        </template>
        <ul>
          <li
            class="item"
            v-for="value of item.list"
            :key="value.product_id"
            @click="$router.push('/details')"
          >
            <div class="item_img">
              <img :src="value.puzzle_url" />
            </div>
            <div class="item_intro">
              <div class="item_name">
                <p>{{ value.name }}</p>
              </div>
              <div class="item_brief">
                <p>{{ value.product_desc }}</p>
              </div>
              <div class="item_price">
                <span class="price">￥{{ value.market_price }}</span>
              </div>
              <div class="item_comment">
                <span>{{ value.comments_total }}条评价</span
                ><span>{{ value.satisfy_per }}满意</span>
              </div>
            </div>
          </li>
        </ul>
        <div class="head_mark">
          <img
            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/3f00943bf04702405b8e8bc9f404a9f6.png"
            alt=""
          />
        </div>
        <div class="recommend_lists">
          <div
            class="recommend_list"
            v-for="(item, index) of recommend"
            :key="index"
            @click="$router.push('/details')"
          >
            <div class="list_img">
              <img :src="'https:' + item.image_url" />
            </div>
            <div class="list_info">
              <div class="list_name">{{ item.name }}</div>
              <div class="list_price price">
                ￥{{ item.price
                }}<del class="price" v-if="item.market_price !== item.price"
                  >￥{{ item.market_price }}</del
                >
              </div>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { topTab, recommend } from "../assets/js/shuju.js";
import Vue from "vue";
import { Tab, Tabs, NavBar } from "vant";
Vue.use(Tab).use(Tabs).use(NavBar);
export default {
  name: "commodityList",
  data() {
    return {
      topTab: null,
      active: 0,
      recommend: null,
    };
  },
  created() {
    this.topTab = topTab;
    this.recommend = recommend;
    this.active = this.$route.params.index;
  },
  methods: {},
};
</script>

<style lang="less">
.commodityList {
  .van-tabs__content {
    .item {
      padding: 0.2rem 0.2rem;
      position: relative;
      border-bottom: 1px solid #e4e4e4;
      display: flex;
      .item_img {
        position: relative;
        width: 2.4rem;
        height: 2.4rem;
        text-align: center;
        display: block;
        border-radius: 0.1rem;
        overflow: hidden;
        background: #f4f4f4;
        img {
          width: auto;
          height: 100%;
        }
      }
      .item_intro {
        display: block;
        padding: 0 0.32rem 0.08rem;
        width: 4.2rem;
        box-sizing: border-box;
        text-align: left;
        flex: 1 1 auto;
        .item_name {
          font-size: 0.32rem;
          color: #333;
          margin-bottom: 0.16rem;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .item_brief {
        font-size: 0.23rem;
        color: rgba(0, 0, 0, 0.54);
        margin-bottom: 0.16rem;
        line-height: 0.3rem;
        height: 0.9rem;
        overflow: hidden;
        font-weight: 400;
        p {
          overflow: hidden;
          text-overflow: ellipsis;
          color: #888;
        }
      }
      .item_price {
        font-size: 0.32rem;
        position: relative;
        align-content: center;
        display: flex;
        .price {
          position: relative;
          line-height: 1em;
          color: #ff6000;
        }
      }
      .item_comment {
        margin-top: 0.1rem;
        span {
          font-size: 0.22rem;
          color: #888;
          margin-right: 0.2rem;
        }
      }
    }
  }
  .van-nav-bar {
    background-color: rgb(242, 242, 242);
    position: sticky;
    width: 100%;
    top: 0px;
    .van-nav-bar__left {
      .van-icon,
      .van-nav-bar__text {
        font-size: 0.5rem;
        line-height: 46px;
        color: #8a8a8a;
      }
    }
  }
  .van-tabs--line .van-tabs__wrap {
    height: auto;
    position: sticky;
    z-index: 99;
    width: 100%;
    top: 46px;
  }
  .van-tab__text {
    img {
      width: 1.12rem;
      height: 1.12rem;
    }
    span {
      display: inline-block;
      width: 100%;
      text-align: center;
      font-weight: 700;
    }
  }
  .van-tabs__nav--line.van-tabs__nav--complete {
    padding-top: 6px;
  }
  .van-tabs__line {
    bottom: 10px;
  }
  .recommend_lists {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .recommend_list {
      flex: 0 0 49.5%;
      width: 49.5%;
      .list_img {
        width: 100%;
        img {
          width: 100%;
        }
      }
      .list_info {
        padding: 0.18rem 0.26rem 0.22rem;
        .list_name {
          font-size: 0.28rem;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .list_price {
          font-size: 0.32rem;
          color: #ff6700;
          margin-top: 0.1rem;
          del {
            font-size: 0.22rem;
            margin-left: 0.1rem;
            color: rgba(0, 0, 0, 0.54);
            text-decoration: line-through;
          }
        }
        .price {
          position: relative;
          padding-left: 0.5em;
          line-height: 1em;
        }
      }
    }
  }
  .head_mark {
    width: 100%;
    img {
      width: 100%;
    }
  }
}
</style>